<template>
  <div>
    <div style="display: flex;justify-content: flex-end;">
      <Button style="margin:2px 12px 10px;" type="primary" @click="createInterview">创建面试</Button>
    </div>

    <can-edit-table
      refs="table"
      v-model="dataList"
      @on-delete="handleDel"
      @on-cell-change="handleCellChange"
      @on-change="handleChanging"
      :hover-show="true"
      :editIncell="true"
      :columns-list="columnList">
    </can-edit-table>
    <Page style="float: right; margin:10px;" :current="current_num" :total="page_count" :pageSize="page_size" showElevator showSizer @on-page-size-change="handleSizeChange" @on-change="handleChangePage"></Page>


    <Modal v-model="modal_show" :width="step_now === 0 ? 500 : 800" :mask-closable="false">
      <div slot="header" style="text-align:center; margin-top:20px;">
        <Steps :current="step_now" size="small">
          <Step title="填写表单"></Step>
          <Step title="选择人员"></Step>
        </Steps>
      </div>

      <div style="text-align:center; max-height:400px; overflow: scroll">
        <Form v-if="step_now === 0" ref="interviewFormValidate" :model="interviewFormValidate" :rules="interviewRuleValidate" :label-width="70">
          <Form-item prop="interview_name" label="面试名">
            <Input v-model="interviewFormValidate.interview_name" type="text" placeholder="请输入面试名"/>
          </Form-item>
          <Form-item prop="start_time" label="面试时间">
            <DatePicker type="date" placeholder="选择时间" v-model="interviewFormValidate.start_time"></DatePicker>
          </Form-item>
          <Form-item prop="recruit_type" label="面试类型">
            <Select v-model="interviewFormValidate.recruit_type" placeholder="请输入面试类型">
              <Option value="社招">社招</Option>
              <Option value="校招">校招</Option>
              <Option value="实习生">实习生</Option>
            </Select>
          </Form-item>
          <Form-item prop="place" label="面试地点">
            <Input v-model="interviewFormValidate.place" type="text" placeholder="请输入面试地点"/>
          </Form-item>
          <Form-item prop="remark" label="备注">
            <Input v-model="interviewFormValidate.remark" type="textarea" placeholder="请输入备注"/>
          </Form-item>
        </Form>

        <Table v-if="step_now === 1" border stripe ref="selection" :columns="columns2" :data="data2" @on-selection-change="handleSelectionChange"></Table>

      </div>

      <div slot="footer">
        <Button type="primary" size="large" long @click="submitCreate('interviewFormValidate')">提交</Button>
      </div>
    </Modal>

  </div>
</template>
<script>
  import canEditTable from './part/canEditTable.vue';
  import interviewApi from '../api/axios/interviewApi'
  import resumePoolApi from '../api/axios/resumePoolApi'

  export default {
    components: {
      canEditTable
    },
    data () {
      return {
        modal_show: false,
        current_num: 1,
        page_count: 5,
        page_size: 5,
        step_now: 0,
        selectionData: [],
        interviewFormValidate: {
          interview_name: '',
          recruit_type: '',
          place: '',
          start_time: '',
          remark: ''
        },
        interviewRuleValidate: {
          interview_name: [
            {required: true, message: '名字不能为空', trigger: 'blur'}
          ],
          recruit_type: [
            {required: true, message: '类型不能为空', trigger: 'change'}
          ],
          place: [
            {required: true, message: '地点不能为空', trigger: 'blur'}
          ],
          start_time: [
            {required: true, type: 'date', message: '时间不能为空', trigger: 'change'}
          ]
        },
        columnList: [
          {
            title: '序号',
            type: 'index',
            align: 'center'
          },
          {
            title: '面试名',
            key: 'interview_name',
            sortable: true,
            editable: true
          },
          {
            title: '招聘类型',
            key: 'recruit_type',
            sortable: true
          },
          {
            title: '面试地点',
            key: 'place',
            sortable: true,
            editable: true
          },
          {
            title: '开始时间',
            key: 'start_time',
            sortable: true
          },
          {
            title: '创建者',
            key: 'staffName',
            sortable: true
          },
          {
            title: '备注',
            key: 'remark',
            sortable: true,
            editable: true
          },
          {
            title: '操作',
            align: 'center',
            width: 125,
            key: 'handle',
            handle: ['edit', 'delete']
          }
        ],
        dataList: [],
        columns2 : [
          {
            type: 'selection',
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name',
            sortable: true
          },
          {
            title: '岗位',
            key: 'job',
            sortable: true
          },
          {
            title: '学历',
            key: 'degree',
            sortable: true
          },
          {
            title: '学校',
            key: 'school',
            sortable: true
          },
          {
            title: '内推',
            key: 'is_recommend',
            sortable: true
          },
          {
            title: '进度',
            key: 'process_state',
            sortable: true
          }
        ],
        data2: [
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          },
          {
            name: '高安',
            job: 'java 开发',
            degree: '本科',
            school: '杭州电子科技大学',
            is_recommend: '否',
            process_state: '笔试中'
          }
        ]
      }
    },
    computed: {
      getStaffId (){
        return this.$store.getters['auth/getStaffId'];
      }
    },
    methods:{
      createInterview (){
        this.modal_show = true;
      },
      submitCreate (interviewFormValidate){
        if (this.step_now === 0){
          this.$refs[interviewFormValidate].validate((valid) => {
            if (valid) {
              this.step_now = 1;
            } else {
              this.$Message.error('请重新填写');
            }
          });

          if (this.step_now === 1){

            let that = this;
            resumePoolApi.getResumeListByType({
              recruitType: that.interviewFormValidate.recruit_type
            },{
              currentPage: null,
              pageSize: null
            },{
              success (res) {
                if (res.data.status === 200) {
                  that.data2 = res.data.data.list;
                }else {
                  console.log("getResumeListByType 请求失败：" + res.data);
                }
              }
            });
          }

        }else {
          this.modal_show = false;
          this.step_now = 0;

          let that = this;
          interviewApi.addInterview({
            staffId: that.getStaffId,
            interview_name: that.interviewFormValidate.interview_name,
            recruit_type: that.interviewFormValidate.recruit_type,
            start_time: that.formatDate(that.interviewFormValidate.start_time),
            place: that.interviewFormValidate.place,
            remark: that.interviewFormValidate.remark,
            userId: that.selectionData
          },{
            success (res) {
              if (res.data.status === 200) {
                that.$Message.success("创建成功");
              }else {
                console.log("addInterview：" + res.data);
              }
            }
          });

        }
      },
      handleSelectionChange(selection){
//        Array.from(selection, item => item.name);
        this.selectionData = selection.map(function(item,index){
          return item.userId;
        });
      },
      handleDel (val, index) {

        let that = this;
        interviewApi.deleteInterview({
          interviewId: val[index].interviewId
        },{
          success (res) {
            if (res.data.status === 200) {
              that.dataList.splice(index,1);
              that.$Message.success("删除成功");
            }else {
              that.$Message.error("删除失败");
              console.log("deleteInterview 请求失败：" + res.data);
            }
          }
        });
//        console.log(JSON.stringify(val));
//        this.$Message.success('删除了第' + (index + 1) + '行数据');
      },
      handleCellChange (val, index, key) {
        this.updateInterview(val,index);

//        console.log(JSON.stringify(val));
//        this.$Message.success('修改了第 ' + (index + 1) + ' 行列名为 ' + key + ' 的数据');
      },
      handleChanging (val, index) {
        this.updateInterview(val,index);
//        console.log(JSON.stringify(val));
//        this.$Message.success('修改了第' + (index + 1) + '行数据');
      },
      handleChangePage(pageNum){
        this.current_num = pageNum;
        this.updateInterviewList();

//        this.$Message.success(pageNum+"");
      },
      handleSizeChange(pageSize){
        this.page_size = pageSize;
        this.updateInterviewList();

//        this.$Message.success(pageSize+"");
      },
      updateInterview(val, index){
        let that = this;
        interviewApi.modifyInterview({
          id: val[index].interviewId,
          interviewName: val[index].interview_name,
          place: val[index].place,
          remark: val[index].remark
        },{
          success (res) {
            if (res.data.status === 200) {
              that.$Message.success("修改成功");
            }else {
              that.$Message.error("修改失败");
              console.log("modifyInterview 请求失败：" + res.data);
            }
          }
        });
      },
      updateInterviewList(){
        let that = this;
        interviewApi.getInterviewList({
          currentPage: that.current_num,
          pageSize: that.page_size
        },{
          success (res) {
            if (res.data.status === 200) {
              that.dataList = res.data.data.list;
              that.page_count = res.data.data.count;
            }else {
              console.log("getInterviewList 请求失败：" + res.data);
            }
          }
        })
      },
      formatDate(daytime){
        return daytime.getFullYear()+"-"+(daytime.getMonth()+1)+"-"+daytime.getDate();
      }
    },
    created() {
      this.updateInterviewList();
    }
  }
</script>
<style>

</style>
